<template>
    <swiper :options="swiperOption" ref="mySwiper" class="wrapper" v-if="showSwiper">
        <swiper-slide v-for="item of swiperList" :key="item.id">
            <img  class="swiper-img"  :src="item.imgUrl">
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
</template>

<script>
 export default {
   name:"homeSwiper",
   data () {
     return {
         swiperOption:{
              pagination:".swiper-pagination"
         }
     }
   },
   computed:{
       showSwiper(){
           return this.swiperList.length
       }
   },
   props:{
       swiperList:Array
   },
   components: {

   }
 }
</script>
<style lang="stylus" scoped>
    .wrapper>>>.swiper-pagination-bullet-active
        background #fff
    .wrapper
        width 100%
        height 0
        padding-bottom 26.67%
        background #eee
        overflow hidden
        .swiper-img
            width 100%
</style>

